import QtQuick 1.1
import com.nokia.meego 1.0
import Qt 4.7
import QtMobility.gallery 1.1



Page {

    id: galleryselected

    DocumentGalleryModel {
        id: imageModel
        rootType: DocumentGallery.Image
        properties: [ "url" ]
        filter: GalleryWildcardFilter {
            property: "fileName";
            value: "*.jpg";
        }
    }

    Component {
        id: fileDelegate
        Rectangle {
            id: fileDelegateBlock
            width: 150; height: 150
            Image {
                id: fileDelegateImage
                width: 150; height: 150
                sourceSize.width: 150; sourceSize.height: 150
                anchors.top: fileDelegateBlock.top
                source: url
            }
            MouseArea {
                id: fileDelegateArea
                anchors.fill: parent
                onClicked: { flipContainer.flipped = !flipContainer.flipped; measureMeeImage.source = url }
            }
        }
    }

    Flipable {
         id: flipContainer
         width: parent.width
         height: parent.height
         property bool flipped: false
         property bool main: false

         transform: Rotation {
             id: rotation
             origin.x: flipContainer.width/2
             origin.y: flipContainer.height/2
             axis.x: 0; axis.y: 1; axis.z: 0
             angle: 0
         }

         states: [
             State {
                 name: "back"
                 PropertyChanges { target: rotation; angle: 180 }
                 when: flipContainer.flipped
             }
         ]

         transitions: [
             Transition {
                 NumberAnimation { target: rotation; property: "angle"; easing.type: Easing.InSine; duration: 1000 }
             }
         ]

         front: GridView {
             id: fileGridView
             width: parent.width; height: parent.height
             cellWidth: 155; cellHeight: 155
             model: imageModel
             currentIndex: imageModel.count - 1
             delegate: fileDelegate
         }

         back: Rectangle {
             id: measureMeeBlock
             width: parent.width
             height: parent.height
             Image {
                 id: measureMeeImage
                 width: measureMeeBlock.width
                 height: measureMeeBlock.height
                 fillMode: Image.PreserveAspectFit
                 source: ""
             }
             Rectangle {
                 id: selectorBlock
                 width: 300
                 height: reference1Button.height + reference2Button.height + item1Button.height + item2Button.height + backtoPicturesButton.height + 25
                 color: "transparent"
                 state: "shown"
                 z: 2
                 states: [
                     State {
                         name: "shown"
                         PropertyChanges {
                             target: selectorBlock
                             x: 0; y: 0
                         }
                     },
                     State {
                         name: "hidden"
                         PropertyChanges {
                             target: selectorBlock
                             x: 0
                             y: 0 - selectorBlock.height
                         }
                     }
                 ]
                 transitions: [
                     Transition {
                         PropertyAnimation { properties: "x,y"; easing.type: Easing.InOutQuad }
                     }
                 ]
                 Button {
                     id: reference1Button
                     text: "Set Reference Point 1"
                     width: selectorBlock.width - 10
                     height: 35
                     anchors { top: selectorBlock.top; topMargin: 5; leftMargin: 5 }
                     checkable: true
                     onClicked: { reference1Area.visible = true; selectorBlock.state = "hidden"; measurementBlock.state = "hidden"; reference1Point.visible = false }
                 }
                 Button {
                     id: reference2Button
                     text: "Set Reference Point 2"
                     width: selectorBlock.width - 10
                     height: 35
                     anchors { top: reference1Button.bottom; topMargin: 5; leftMargin: 5 }
                     checkable: true
                     onClicked: { reference2Area.visible = true; selectorBlock.state = "hidden"; measurementBlock.state = "hidden"; reference2Point.visible = false }
                 }
                 Button {
                     id: item1Button
                     text: "Set Item Point 1"
                     width: selectorBlock.width - 10
                     height: 35
                     anchors.top: reference2Button.bottom
                     anchors.topMargin: 5
                     anchors.leftMargin: 5
                     onClicked: { item1Area.visible = true; selectorBlock.state = "hidden"; measurementBlock.state = "hidden"; item1Point.visible = false }
                 }
                 Button {
                     id: item2Button
                     text: "Set Item Point 2"
                     width: selectorBlock.width - 10
                     height: 35
                     anchors.top: item1Button.bottom
                     anchors.topMargin: 5
                     anchors.leftMargin: 5
                     onClicked: { item2Area.visible = true; selectorBlock.state = "hidden"; measurementBlock.state = "hidden"; item2Point.visible = false }
                 }
                 Button {
                     id: backtoPicturesButton
                     text: "Back To Pictures"
                     width: selectorBlock.width - 10
                     height: 35
                     anchors.top: item2Button.bottom
                     anchors.topMargin: 5
                     anchors.leftMargin: 5
                     onClicked: { flipContainer.flipped = !flipContainer.flipped; referenceSizeInput.text = ""; reference1Point.visible = false; reference2Point.visible = false; item1Point.visible = false; item2Point.visible = false; reference1Button.checked = false; reference2Button.checked = false; item1Button.checked = false; item2Button.checked = false }
                 }
             }
             Rectangle {
                 id: measurementBlock
                 width: 300
                 height: referenceSizeInput.height + itemLengthBlock.height + aboutButton.height + 10
                 state: "shown"
                 color: "transparent"
                 states: [
                     State {
                         name: "shown"
                         PropertyChanges {
                             target: measurementBlock
                             x: parent.width - 300
                             y: parent.height - measurementBlock.height
                         }
                     },
                     State {
                         name: "hidden"
                         PropertyChanges {
                             target: measurementBlock
                             x: parent.width - 300
                             y: parent.height
                         }
                     }
                 ]
                 transitions: [
                     Transition {
                         PropertyAnimation { properties: "x,y"; easing.type: Easing.InOutQuad }
                     }
                 ]
                 TextField {
                     id: referenceSizeInput
                     anchors {right: measurementBlock.right; top: measurementBlock.top; rightMargin: 5 }
                     width: measurementBlock.width - 10
                     height:  35
                     placeholderText: "Input Reference Length"
                     validator: IntValidator { bottom: 0; top: 214748364 }
                     inputMethodHints: Qt.ImhDigitsOnly | Qt.ImhNoPredictiveText
                 }

                 Rectangle {
                     id: itemLengthBlock
                     width: measurementBlock.width - 10
                     height: 35
                     anchors { top: referenceSizeInput.bottom; right: measurementBlock.right; rightMargin: 5; topMargin: 5 }
                     color: "white"
                     border.color: "grey"
                     smooth: true
                     radius: 17.5
                     Text {
                         id: itemLengthText                         
                         anchors {verticalCenter: parent.verticalCenter; left: parent.left; leftMargin: 8}
                         text: "Item Length : "
                         font.pointSize: 18
                     }
                     Text {
                         id: itemCalculatedLengthText
                         property real itemLengthCalc: Math.floor(referenceSizeInput.text * Math.sqrt((itemXLength*itemXLength) + (itemYLength*itemYLength)) / Math.sqrt((referenceXLength*referenceXLength) + (referenceYLength*referenceYLength)))
                         property real itemXLength: Math.floor(item2Point.item2PointX - item1Point.item1PointX)
                         property real itemYLength: Math.floor(item2Point.item2PointY - item1Point.item1PointY)
                         property real referenceXLength: Math.floor(reference2Point.reference2PointX - reference1Point.reference1PointX)
                         property real referenceYLength: Math.floor(reference2Point.reference2PointY - reference1Point.reference1PointY)
                         anchors {verticalCenter: parent.verticalCenter; left: itemLengthText.right }
                         font.pointSize: 18
                         text:  reference1Point.reference1PointSet == true && reference2Point.reference2PointSet == true ? itemLengthCalc : "0"
                     }
                 }
                 Button {
                    id: aboutButton
                    text: "About"
                    width: measurementBlock.width - 10
                    height: 35
                    anchors { top: itemLengthBlock.bottom; topMargin: 5; leftMargin: 5 }
                    onClicked: { pageStack.push(Qt.resolvedUrl("About.qml")) }
                 }

             }
             MouseArea {
                 id: reference1Area
                 anchors.fill: measureMeeBlock
                 onPressed: { reference1Point.visible = true; reference1Point.reference1PointX = mouseX; reference1Point.reference1PointY = mouseY }
                 onPositionChanged: { reference1Point.reference1PointX = mouseX; reference1Point.reference1PointY = mouseY }
                 onClicked: { reference1Area.visible = false; reference1Point.visible = true; reference1Point.reference1PointX = mouseX; reference1Point.reference1PointY = mouseY; selectorBlock.state = "shown"; measurementBlock.state = "shown"; reference1Point.reference1PointSet = true; reference1Button.checked = true }
                 visible: false
             }
             MouseArea {
                 id: reference2Area
                 anchors.fill: measureMeeBlock
                 onPressed: { reference2Point.visible = true; reference2Point.reference2PointX = mouseX; reference2Point.reference2PointY = mouseY }
                 onPositionChanged: { reference2Point.reference2PointX = mouseX; reference2Point.reference2PointY = mouseY }
                 onClicked: { reference2Area.visible = false; reference2Point.visible = true; reference2Point.reference2PointX = mouseX; reference2Point.reference2PointY = mouseY; selectorBlock.state = "shown"; measurementBlock.state = "shown"; reference2Point.reference2PointSet = true; reference2Button.checked = true }
                 visible: false
             }
             MouseArea {
                 id: item1Area
                 anchors.fill: measureMeeBlock
                 onPressed: { item1Point.visible = true; item1Point.item1PointX = mouseX; item1Point.item1PointY = mouseY }
                 onPositionChanged: { item1Point.item1PointX = mouseX; item1Point.item1PointY = mouseY }
                 onClicked: { item1Area.visible = false; item1Point.visible = true; item1Point.item1PointX = mouseX; item1Point.item1PointY = mouseY; selectorBlock.state = "shown"; measurementBlock.state = "shown"; item1Button.checked = true }
                 visible: false
             }
             MouseArea {
                 id: item2Area
                 anchors.fill: measureMeeBlock
                 onPressed: { item2Point.visible = true; item2Point.item2PointX = mouseX; item2Point.item2PointY = mouseY }
                 onPositionChanged: { item2Point.item2PointX = mouseX; item2Point.item2PointY = mouseY }
                 onClicked: { item2Area.visible = false; item2Point.visible = true; item2Point.item2PointX = mouseX; item2Point.item2PointY = mouseY; selectorBlock.state = "shown"; measurementBlock.state = "shown"; item2Button.checked = true }
                 visible: false
             }
             Rectangle {
                 id: reference1Point
                 property int reference1PointX: 0
                 property int reference1PointY: 0
                 property bool reference1PointSet: false
                 width: 8; height: 8
                 x: reference1PointX - 4; y: reference1PointY - 4
                 color: "black"; border.color: "white"
                 smooth: true; radius: 4
                 visible: false
             }
             Rectangle {
                 id: reference2Point
                 property int reference2PointX: 0
                 property int reference2PointY: 0
                 property bool reference2PointSet: false
                 width: 8; height: 8
                 x: reference2PointX - 4; y: reference2PointY - 4
                 color: "black"; border.color: "white"
                 smooth: true; radius: 4
                 visible: false
             }
             Rectangle {
                 id: item1Point
                 property int item1PointX: 0
                 property int item1PointY: 0
                 width: 8; height: 8
                 x: item1PointX -4; y: item1PointY - 4
                 color: "white"; border.color: "black"
                 smooth: true; radius: 4
                 visible: false
             }
             Rectangle {
                 id: item2Point
                 property int item2PointX: 0
                 property int item2PointY: 0
                 width: 8; height: 8
                 x: item2PointX - 4; y: item2PointY - 4
                 color: "white"; border.color: "black"
                 smooth: true; radius: 4
                 visible: false
             }
         }

     }
}
